<!DOCTYPE html>
<html>
<head>
	<title>拼团</title>
	<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <link rel="stylesheet" href="css/joy.css" />
</head>
<body>
    <div class="image">
	    <img src="832d81886646bda96f713291719e87717765893f27ce1-8ersex_fw658@2x.png"/>
    </div>

        <div class="title">
            <strong>粉红的回忆</strong>
        </div>
        <ul>
            <li style="height:1.42rem;">
                <div>
                    <div class="left">
                        <img src="KTV@2x.png" style="width:0.5rem;height:0.5rem;position:relative;top:0.2rem;"/>
                    </div>
                    <ol class="left">
                        <li>
                            <img src="男女@2x.png" style="width:0.29rem;height:0.29rem;display:inline-block;"/>
                            <span>五人</span>
                        </li>
                        <li>
                            <img src="图层3拷贝@2x.png" style="width:0.29rem;height:0.29rem;display:inline-block;"/>
                            <span>五人</span>
                        </li>
                    </ol>
                    <ol class="right">
                        <li>
                            <span style="color:#ff768d;">&yen;150</span>
                            <span style="text-decoration:line-through;color:#ccc;">&yen;150</span>
                        </li>
                        <li>
                            <span style="color:#75c4ef;">&yen;300</span>
                            <span style="text-decoration:line-through;color:#ccc;">&yen;300</span>
                        </li>
                    </ol>
                </div>
            </li>
            <li><div><span>时间: 6月5日 22:00 - 6月6日 14:00</span></div></li>
            <li><div><span>地点: 上海市虹口区丹徒路109号</span></div></li>
            <li>
                <div>
                    <span>类型: 3000元精品套餐</span>
                    <div id="detailClick" class="right"><img src="图层6@2x.png"/></div>
                </div>
            </li>
        </ul>

        <div class="title">
            <strong>团长信息</strong>
        </div>
        <div style="height:1.12rem;padding-top:0.2rem;padding-left:0.24rem;">
            <div style="width:0.95rem;height:0.95rem;border-radius:50%;" class="left">
                <img src="95条子团长.png" style="width:100%;height:100%;"/>
            </div>
            <ol class="left">
                <li>条子</li>
                <li><img src="爱心@2x.png" style="height:0.3rem;"/><span style="color:#ccc;margin-left:0.1rem;">2333</span></li>
            </ol>
            <div class="right"><img src="图层7@2x.png"/></div>
        </div>

        <div class="title">
            <strong>参团信息</strong>
        </div>
        <div style="padding-top:0.2rem;padding-bottom:0.2rem;">
            <div>
                <img src="图层8@2x.png" class="groupMemberImg"/>
                <img src="椭圆1拷贝4@2x.png" class="groupMemberImg"/>
                <img src="椭圆1拷贝4@2x.png" class="groupMemberImg"/>
                <img src="椭圆1拷贝4@2x.png" class="groupMemberImg"/>
                <img src="椭圆1拷贝4@2x.png" class="groupMemberImg"/>
                <img src="椭圆1拷贝4@2x.png" class="groupMemberImg"/>
            </div>
            <div>
                <img src="图层9@2x.png" class="groupMemberImg"/>
                <img src="椭圆1拷贝4@2x.png" class="groupMemberImg"/>
                <img src="椭圆1拷贝4@2x.png" class="groupMemberImg"/>
                <img src="椭圆1拷贝4@2x.png" class="groupMemberImg"/>
                <img src="椭圆1拷贝4@2x.png" class="groupMemberImg"/>
                <img src="椭圆1拷贝4@2x.png" class="groupMemberImg"/>
            </div>
        </div>

        <div class="title">
            <strong>团购须知</strong>
        </div>
        <ul>
            <li><div><span>1.不许哭</span></div></li>
            <li><div><span>2.不许笑</span></div></li>
        </ul>

        <div class="title">
            <strong> 退款须知</strong>
        </div>
        <ul>
            <li><div><span style="font-size:0.29rem;">支持活动开始前一天退款，活动开始一天内不支持退款。</span></div></li>
        </ul>
        <div style="height:0.1rem;background:#ccc;"></div>
        <div style="height:1rem;">
            <ul>
                <li class="left"><div>剩余1天23小时</div></li>
                <li class="right" style="background:#e4007f;"><div><span style="color:#fff;">立即参团<span></div></li>
            </ul>
        </div>
        <div style="height:0.1rem;background:#ccc;"></div>
        <div style="height:1rem;">
            <ul>
                <li class="left"><div>剩余1天23小时</div></li>
                <li class="right" style="background:#e4007f;"><div><span style="color:#fff;">邀请好友<span></div></li>
            </ul>
        </div>
        <div style="height:0.1rem;background:#ccc;"></div>

        <div id="detail" style="position:fixed;bottom:0rem;z-index:9999;background:#fff;width:100%;display:none;">
            <ul>
                <li id="detailTitle"><div>套餐详情</div></li>
                <li>
                    <div class="left">小包 &Chi; 1</div>
                    <div class="right" style="color:#e4007f;">&yen;31</div>
                </li>
                <li id="detailClose" style="background:#e4007f;">
                    <div style="text-align:center;"><span style="color:#fff;">关闭</span></div>
                </li>
            </ul>
        </div>
        <div id="screen"></div>

	<script>
        //rem计算方式：设计图尺寸px / 100 = 实际rem  例: 100px = 1rem
        ! function(window) {
            var docWidth = 750;    /* 设计图文档宽度 */

            var doc = window.document,
                docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

            var recalc = (function refreshRem() {
                var clientWidth = docEl.getBoundingClientRect().width;
                /* 8.55：小于320px不再缩小，11.2：大于420px不再放大 */
                docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px';
                return refreshRem;
            })();

            /* 添加倍屏标识，安卓为1 */
            docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);

            if(/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
                /* 添加IOS标识 */
                doc.documentElement.classList.add('ios');
                /* IOS8以上给html添加hairline样式，以便特殊处理 */
                if(parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8)
                    doc.documentElement.classList.add('hairline');
            }

            if(!doc.addEventListener) return;

            window.addEventListener(resizeEvt, recalc, false);

            doc.addEventListener('DOMContentLoaded', recalc, false);
        }(window);
    </script>
	<script src="jquery-2.1.3.min.js"></script>
    <script src="joy.js"></script>
</body>
</html>